<template>
  <div class="container">
    <el-form
      ref="projectFormRef"
      :model="formData"
      :rules="rules"
      label-position="top"
    >
      <el-row :gutter="32">
        <el-col :span="12">
          <el-form-item :label="$t('common.projectName')" prop="p_name">
            <el-input
              v-model="formData.p_name"
              :placeholder="$t('common.pleaseEnter')"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('common.projectNo')">
            <el-input
              v-model="formData.p_no"
              :placeholder="$t('common.autoNo')"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="32">
        <el-col :span="12">
          <!-- <el-form-item :label="$t('common.projectLeader')" prop="p_manager">
            <el-input
              v-model="formData.p_manager"
              :placeholder="$t('common.pleaseEnter')"
              :disabled="disabled"
            />
          </el-form-item> -->
          <el-form-item :label="$t('common.projectLeader')" prop="p_manager">
            <el-select
              v-model="formData.p_manager"
              :placeholder="$t('common.pleaseSelect')"
              :disabled="disabled"
              @change="handleChange"
            >
              <el-option
                v-for="item in stakeholderOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <!-- <el-form-item :label="$t('common.contactNumber')" prop="p_contact">
            <el-input
              v-model="formData.p_contact"
              :placeholder="$t('common.pleaseEnter')"
              :disabled="disabled"
            />
          </el-form-item> -->
          <el-form-item :label="$t('common.contactNumber')">
            <el-input
              v-model="formData.p_contact"
              :placeholder="$t('common.autoLeader')"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="32">
        <el-col :span="12">
          <el-form-item :label="$t('common.startDate')" prop="start_d">
            <el-date-picker
              v-model="formData.start_d"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :placeholder="$t('common.pleaseSelect')"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('common.endDate')" prop="end_d">
            <el-date-picker
              v-model="formData.end_d"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :placeholder="$t('common.pleaseSelect')"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="32">
        <el-col :span="12">
          <el-form-item
            :label="$t('common.dockingContact')"
            prop="docking_person"
          >
            <el-input
              v-model="formData.docking_person"
              :placeholder="$t('common.pleaseEnter')"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('common.dockingContactPhone')"
            prop="docking_phone"
          >
            <el-input
              v-model="formData.docking_phone"
              :placeholder="$t('common.pleaseEnter')"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="32">
        <el-col :span="12">
          <el-form-item :label="$t('common.projectStatus')" prop="status">
            <el-select v-model="formData.status" :disabled="disabled">
              <el-option
                :key="1"
                :label="$t('common.inTheBiddingProcess')"
                :value="1"
              />
              <el-option :key="2" :label="$t('common.wonTheBid')" :value="2" />
              <el-option
                :key="3"
                :label="$t('common.notWinningTheBid')"
                :value="3"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item :label="$t('common.typeOfContract')" prop="contract_t">
            <el-select v-model="formData.contract_t">
              <el-option :key="0" label="纸质合同" value="1" />
              <el-option :key="1" label="电子合同" value="2" />
              <el-option :key="2" label="口头合同" value="3" />
              <el-option :key="3" label="其他" value="4" />
            </el-select>
          </el-form-item>
        </el-col> -->
      </el-row>

      <el-row :gutter="32">
        <el-col :span="24">
          <el-form-item :label="$t('common.remark')" prop="contract_t">
            <el-input
              v-model="formData.remark"
              size="large"
              :placeholder="$t('common.pleaseEnter')"
              type="textarea"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { BaseInfo } from "@/api/project/model";
defineOptions({
  name: "BasicInfoForm",
});
const { t } = useI18n();

const props = withDefaults(
  defineProps<{
    stakeholderOptions?: Options[];
    disabled?: boolean;
  }>(),
  {
    stakeholderOptions: () => [],
    disabled: false,
  }
);

const formData = reactive<BaseInfo>({
  status: 1,
});
const projectFormRef = ref(ElForm);
const rules = reactive({
  p_name: [
    { required: true, message: t("common.pleaseEnter"), trigger: "blur" },
  ],
  // p_manager_id: [
  //   { required: true, message: t("common.pleaseSelect"), trigger: "blur" },
  // ],
  p_manager: [
    { required: true, message: t("common.pleaseEnter"), trigger: "blur" },
  ],
  p_contact: [
    { required: true, message: t("common.pleaseEnter"), trigger: "blur" },
  ],
  start_d: [
    { required: true, message: t("common.pleaseSelect"), trigger: "blur" },
  ],
  end_d: [
    { required: true, message: t("common.pleaseSelect"), trigger: "blur" },
  ],
  docking_person: [
    { required: true, message: t("common.pleaseEnter"), trigger: "blur" },
  ],
  docking_phone: [
    { required: true, message: t("common.pleaseEnter"), trigger: "blur" },
  ],
  status: [
    { required: true, message: t("common.pleaseSelect"), trigger: "blur" },
  ],
});
const handleChange = (value: any) => {
  const index = props.stakeholderOptions.findIndex(
    (option) => option.value === value
  );
  formData.p_contact = props.stakeholderOptions[index].mobile;
};
defineExpose({ projectFormRef, formData });
</script>
